<template>
    <div id="diff-entry">
        <div>
            <el-row style="margin-top: 5px">
                <el-col :span="1"><el-tag>条目号</el-tag></el-col>
                <el-col :span="5" style="margin-left: 5px"><el-input size="mini" v-model="entryCode" class="info-dialog-form" clearable /></el-col>
                <el-col :span="10" style="margin-left: 5px"
                    ><el-button type="primary" @click="quequeryEntryry" v-preventReClick>查询条目</el-button></el-col
                >
            </el-row>
        </div>
        <div :style="{ display: isShowtree ? 'none' : '' }">
            <el-divider></el-divider>
            <el-tree
                class="filter-tree"
                :data="entryRenderTree"
                :props="defaultProps"
                :expand-on-click-node="false"
                :filter-node-method="filterNode"
                accordion
                highlight-current
                ref="tree"
                @node-click="handleNodeClick"
            >
                <span slot-scope="{ node }">
                    <span :title="node.label">{{ node.label }}</span>
                </span>
            </el-tree>
            <el-divider></el-divider>

            <el-row>
                <el-col :span="330">
                    <el-form :inline="true">
                        <el-form-item label="产品代码:">
                            <RiskEntryInput style="width: 120px" @set-entry-data="getEntryslist" :returnDatas="entryBranchSql.fundCode" />
                        </el-form-item>
                        <el-form-item label="条目分支:">
                            <el-select style="width: 120px" v-model="entryBranchSql.branchNo" size="mini">
                                <el-option v-for="i in entryRenderTree" :key="i.key" :label="i.label" :value="i.branchNo"> </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="单独控制:">
                            <el-select v-model="entryBranchSql.separateName" size="mini" style="width: 120px">
                                <el-option v-for="i in separateColumn" :key="i.key" :label="i.name" :value="i.label"> </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item>
                            <el-input style="width: 120px" size="mini" v-model="entryBranchSql.separateValue" class="info-dialog-form" clearable />
                        </el-form-item>
                        <el-form-item label="数据类型:">
                            <el-radio-group v-model="entryBranchSql.calType" size="mini" style="width: 120px" class="title-left">
                                <el-radio-button label="1">持仓</el-radio-button>
                                <el-radio-button label="2">指令</el-radio-button>
                            </el-radio-group>
                        </el-form-item>
                    </el-form>
                </el-col>
                <el-col :span="2" style="margin-left: 3px"
                    ><el-button type="primary" @click="execEntryBranchSql(1)" v-preventReClick>执行恒生sql</el-button></el-col
                >
                <el-col :span="2" style="margin-left: 3px"
                    ><el-button type="primary" @click="execEntryBranchSql(2)" v-preventReClick>执行风控sql</el-button></el-col
                >
                <el-col :span="2" style="margin-left: 3px"
                    ><el-button type="primary" @click="diffEntryBranchSqlResult" v-preventReClick>明细勾对</el-button></el-col
                >
            </el-row>
        </div>
        <div style="overflow: auto; height: 500px" :style="{ display: isShowDiff ? 'none' : '' }">
            <code-diff :old-string="diffData.o32" :new-string="diffData.risk" file-name="diff-sql" output-format="side-by-side" />
        </div>
        <!-- 结果-->
        <div style="overflow: auto; height: 500px; border-radius: 2px" :style="{ display: isShowResult ? 'none' : '' }">
            <span>勾对结果:</span>
            <el-collapse accordion @change="handleChange">
                <el-collapse-item title="O32\风控存在且一致" name="1">
                    <div v-for="item in this.activeNames[0]" :key="item">{{ item }}</div>
                </el-collapse-item>
                <el-collapse-item title="O32\风控存在且不一致" name="2">
                    <div v-for="item in this.activeNames[1]" :key="item">{{ item }}</div>
                </el-collapse-item>
                <el-collapse-item title="O32有风控没有" name="3">
                    <div v-for="item in this.activeNames[2]" :key="item">{{ item }}</div>
                </el-collapse-item>
                <el-collapse-item title="风控有O32没有" name="4">
                    <div v-for="item in this.activeNames[3]" :key="item">{{ item }}</div>
                </el-collapse-item>
            </el-collapse>
        </div>

        <div>
            <yh-dialog drag title="SQL维护" :visible.sync="visibleTemp" width="1000px" :close-on-click-modal="false">
                <div style="width: 800px; margin: auto">
                    <el-row style="margin-bottom: 5px">
                        <el-col><el-input type="textarea" :rows="3" placeholder="维护sql1" v-model="searchParam.sql1"> </el-input></el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col><el-input type="textarea" :rows="3" placeholder="维护sql2" v-model="searchParam.sql2"> </el-input></el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col><el-input type="textarea" :rows="3" placeholder="维护sql3" v-model="searchParam.sql3"> </el-input></el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col><el-input type="textarea" :rows="3" placeholder="维护sql4" v-model="searchParam.sql4"> </el-input></el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col><el-input type="textarea" :rows="3" placeholder="维护公共sql头" v-model="searchParam.common"> </el-input></el-col>
                    </el-row>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="reset">重 置</el-button>
                    <el-button size="mini" @click="closeModal">取 消</el-button>
                    <el-button size="mini" type="primary" @click="onSubmit">确 定</el-button>
                </div>
            </yh-dialog>
        </div>
        <div>
            <yh-dialog drag title="明细勾对" :visible.sync="visibleDiff" width="1000px" :close-on-click-modal="false">
                <div style="width: 900px; margin: auto">
                    <el-row style="margin-bottom: 5px">
                        <el-col>
                            <el-form :inline="true">
                                <el-form-item label="主键选择"></el-form-item>
                                <el-form-item label="O32:">
                                    <el-select style="width: 300px" collapse-tags multiple v-model="selectKeys.o32" size="mini">
                                        <el-option v-for="i in checkColums.o32" :key="i.key" :label="i" :value="i"> </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="风控:">
                                    <el-select style="width: 300px" collapse-tags multiple v-model="selectKeys.risk" size="mini">
                                        <el-option v-for="i in checkColums.risk" :key="i.key" :label="i" :value="i"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                    <el-row style="margin-bottom: 5px">
                        <el-col>
                            <el-form :inline="true">
                                <el-form-item label="勾对字段"></el-form-item>
                                <el-form-item label="O32:">
                                    <el-select style="width: 300px" collapse-tags multiple v-model="selectColums.o32" size="mini">
                                        <el-option v-for="i in checkColums.o32" :key="i.key" :label="i" :value="i"> </el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="风控:">
                                    <el-select style="width: 300px" collapse-tags multiple v-model="selectColums.risk" size="mini">
                                        <el-option v-for="i in checkColums.risk" :key="i.key" :label="i" :value="i"> </el-option>
                                    </el-select>
                                </el-form-item>
                            </el-form>
                        </el-col>
                    </el-row>
                </div>
                <div slot="footer" class="dialog-footer">
                    <el-button size="mini" @click="resetDiff">重 置</el-button>
                    <el-button size="mini" @click="closeModalDiff">取 消</el-button>
                    <el-button size="mini" type="primary" @click="onSubmitDiff">确 定</el-button>
                </div>
            </yh-dialog>
        </div>
    </div>
</template>

<script lang="ts">
import { Vue, Component } from 'vue-property-decorator';
import * as api from '../entry-diff/api/diff-entry';
import RiskEntryInput from '@/common/components/risk-entry-input.vue';
import { CodeDiff } from 'v-code-diff';
@Component({
    name: 'DiffEntry',
    components: {
        RiskEntryInput,
        CodeDiff,
    },
})
export default class DiffEntry extends Vue {
    private batchNo: string = '';
    entryCode: '';
    isShowtree: boolean = true;
    isShowDiff: boolean = true;
    isShowResult: boolean = true;
    entryRenderTree: any[] = [];
    private visibleTemp: boolean = false;
    visibleDiff: boolean = false;
    diffData = {
        o32: '',
        risk: '',
    };
    separateColumn = [
        { label: 'C_STOCk_CODE', name: '证券代码' },
        { label: 'C_ISSUCE_CODE', name: '发行人代码' },
        { label: 'C_OPPOENT_CODE', name: '交易对手' },
    ];

    calTypes = [
        { label: 'C_STOCk_CODE', name: '证券代码' },
        { label: 'C_ISSUCE_CODE', name: '发行人代码' },
        { label: 'C_OPPOENT_CODE', name: '交易对手' },
    ];
    private searchParam = {
        sql1: '',
        sql2: '',
        sql3: '',
        sql4: '',
        common: '',
    };
    /**
     *勾对字段设置
     */
    private checkColums = {
        o32: [],
        risk: [],
    };

    /**
     *勾对字段选择
     */
    private selectColums = {
        o32: [],
        risk: [],
    };

    /**
     *勾对字段选择
     */
    private selectKeys = {
        o32: [],
        risk: [],
    };

    private entryBranchSql = {
        batchNo: '',
        entryCode: '',
        branchNo: '',
        calType: '1',
        sysLabel: '',
        separateName: '',
        separateValue: '',
        fundCode: '',
    };

    private node = {
        branchNo: '',
        label: '',
        level: 0,
        calType: '',
        sysLabel: '',
    };
    activeNames = [[], [], [], []];

    data() {
        return {
            entryCode: '',
            searchParam: {},
        };
    }
    // 导出表结构
    getEntryslist(val: any) {
        this.entryBranchSql.fundCode = val;
    }
    /**
     * 查询条目分支信息
     */
    private quequeryEntryry() {
        if (this.entryCode === '') {
            this.yh_message_warn('请输入内容');
        }
        var data = { entryCode: this.entryCode };
        api.queryEntry(data).then((res: any) => {
            this.entryRenderTree = res;
            if (this.entryRenderTree.length > 0) {
                this.isShowtree = false;
            }
        });

        api.generateBatchNo().then((res: any) => {
            this.batchNo = res;
        });
    }
    /**
     * 执行sql
     */
    private execEntryBranchSql(sysLabel) {
        this.entryBranchSql.entryCode = this.entryCode;
        this.entryBranchSql.sysLabel = sysLabel;
        this.entryBranchSql.batchNo = this.batchNo;
        if (this.isEmpty(this.entryBranchSql.branchNo)) {
            this.yh_message_warn('请先选择分支号');
            return;
        }
        if (this.isEmpty(this.entryBranchSql.fundCode)) {
            this.yh_message_warn('请先选择产品号');
            return;
        }
        api.execEntryBranchSql(this.entryBranchSql).then((res: any) => {
            this.isShowDiff = false;
            if (sysLabel === 1) {
                this.diffData.o32 = res.result;
                this.checkColums.o32 = res.columns;
            } else {
                this.diffData.risk = res.result;
                this.checkColums.risk = res.columns;
            }
        });
    }
    /**
     * 比对结果
     */
    private diffEntryBranchSqlResult() {
        if (this.checkColums.o32.length < 1) {
            this.yh_message_warn('请先执行o32的SQL');
            return;
        }
        if (this.checkColums.risk.length < 1) {
            this.yh_message_warn('请先执行风控的SQL');
            return;
        }
        this.visibleDiff = true;
    }

    /**
     * 点击树
     */
    private handleNodeClick(node) {
        if (!node.children && node.level === 2) {
            this.$set(node, 'children', []);
        } else {
            if (node.level === 4) {
                this.visibleTemp = true;
                this.node = node;
                var data = {
                    branchNo: this.node.branchNo,
                    entryCode: this.entryCode,
                    sysLabel: this.node.sysLabel,
                    calType: this.node.calType,
                };
                api.queryEntryBranchSql(data).then((res: any) => {
                    if (!this.isEmpty(res)) {
                        this.searchParam = res;
                    }
                });
            }
            return;
        }
        var branchNo = node.branchNo;
        const newChild = {
            label: '日初',
            calType: '1',
            level: 3,
            branchNo: branchNo,
            children: [
                {
                    branchNo: branchNo,
                    label: 'O32',
                    level: 4,
                    calType: '1',
                    sysLabel: '1',
                },
                { branchNo: branchNo, label: '风控', level: 4, calType: '1', sysLabel: '2' },
            ],
        };
        const newChild1 = {
            label: '指令',
            calType: '2',
            level: 3,
            branchNo: branchNo,
            children: [
                {
                    branchNo: branchNo,
                    label: 'O32',
                    level: 4,
                    calType: '2',
                    sysLabel: '1',
                },
                { branchNo: branchNo, label: '风控', calType: '2', level: 4, sysLabel: '2' },
            ],
        };

        node.children.push(newChild);
        node.children.push(newChild1);
    }

    reset() {
        this.searchParam = {
            sql1: '',
            sql2: '',
            sql3: '',
            sql4: '',
            common: '',
        };
    }

    closeModal() {
        this.visibleTemp = false;
        this.node = { branchNo: '', label: '', level: 0, calType: '', sysLabel: '' };
    }

    onSubmit() {
        this.visibleTemp = false;
        var data = {
            sql: this.searchParam,
            branchNo: this.node.branchNo,
            entryCode: this.entryCode,
            sysLabel: this.node.sysLabel,
            calType: this.node.calType,
        };
        api.editEntryBranchSql(data).then((res: any) => {
            this.yh_message_success('更新成功');
            this.node = { branchNo: '', label: '', level: 0, calType: '', sysLabel: '' };
        });
    }

    resetDiff() {
        this.selectColums = {
            o32: [],
            risk: [],
        };
        this.selectKeys = {
            o32: [],
            risk: [],
        };
    }

    closeModalDiff() {
        this.visibleDiff = false;
    }

    onSubmitDiff() {
        this.visibleDiff = false;
        var data = {
            keys: this.selectKeys,
            columns: this.selectColums,
            batchNo: this.batchNo,
            branchNo: this.entryBranchSql.branchNo,
            calType: this.entryBranchSql.calType,
        };
        api.diffEntryBranchSqlResult(data).then((res: any) => {
            this.isShowResult = false;
            this.activeNames = res;
        });
    }
    /**
     * 暂时不实现
     */
    handleChange(val) {}

    isEmpty(obj) {
        return typeof obj == 'undefined' || obj == null || obj === '';
    }
}
</script>

<style lang="scss" scoped>
#diff-entry {
    width: 100%;
    height: 100%;
    min-width: 1400px;
}
</style>
